@uppy/thumbnail-generator
Advanced tools
Uppy plugin that generates small previews of images to show on your upload UI.
@uppy/thumbnail-generator is a plugin for the Uppy file uploader that generates image thumbnails for preview purposes. It is particularly useful for providing users with a visual representation of the images they are uploading.
Generate Thumbnails
This feature allows you to generate thumbnails for images that are being uploaded. The `thumbnailWidth` option specifies the width of the generated thumbnail. The `thumbnail:generated` event is triggered when a thumbnail is successfully created, providing the file and preview URL.
const Uppy = require('@uppy/core');
const ThumbnailGenerator = require('@uppy/thumbnail-generator');
const uppy = Uppy();
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 200,
});
uppy.on('thumbnail:generated', (file, preview) => {
console.log(file.name, preview);
// You can now use the preview URL to display the thumbnail
});Custom Thumbnail Dimensions
This feature allows you to specify custom dimensions for the generated thumbnails. By setting both `thumbnailWidth` and `thumbnailHeight`, you can control the size of the thumbnails more precisely.
const Uppy = require('@uppy/core');
const ThumbnailGenerator = require('@uppy/thumbnail-generator');
const uppy = Uppy();
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 300,
thumbnailHeight: 300,
});
uppy.on('thumbnail:generated', (file, preview) => {
console.log(file.name, preview);
// You can now use the preview URL to display the thumbnail
});Thumbnail Quality
This feature allows you to set the quality of the generated thumbnails. The `quality` option accepts a value between 0 and 1, where 1 is the highest quality.
const Uppy = require('@uppy/core');
const ThumbnailGenerator = require('@uppy/thumbnail-generator');
const uppy = Uppy();
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 200,
quality: 0.8,
});
uppy.on('thumbnail:generated', (file, preview) => {
console.log(file.name, preview);
// You can now use the preview URL to display the thumbnail
});Sharp is a high-performance image processing library that can resize, crop, and convert images in various formats. Unlike @uppy/thumbnail-generator, which is specifically designed for generating thumbnails within the Uppy ecosystem, Sharp is a more general-purpose library that can be used in a variety of image processing tasks.
Jimp is an image processing library for Node.js that supports image resizing, cropping, and various other manipulations. Similar to Sharp, Jimp is a general-purpose library and not specifically tied to any file uploader like Uppy. It offers a wide range of image processing functionalities.
GraphicsMagick (gm) is a Node.js wrapper for the GraphicsMagick and ImageMagick image processing libraries. It provides extensive image manipulation capabilities, including resizing and thumbnail generation. Unlike @uppy/thumbnail-generator, gm is not specifically designed for integration with file uploaders but offers a broader range of image processing features.
Uppy plugin that generates small previews of images to show on your upload UI.
Uppy is being developed by the folks at Transloadit, a versatile file encoding service.
import Uppy from '@uppy/core'
import ThumbnailGenerator from '@uppy/thumbnail-generator'
const uppy = new Uppy()
uppy.use(ThumbnailGenerator, {
thumbnailWidth: 200,
})
$ npm install @uppy/thumbnail-generator
Alternatively, you can also use this plugin in a pre-built bundle from Transloadit’s CDN: Edgly. In that case Uppy will attach itself to the global window.Uppy object. See the main Uppy documentation for instructions.
3.1.0
Released: 2022-09-25
| Package | Version | Package | Version | | ------------------------- | ------- | ------------------------- | ------- | | @uppy/angular | 0.4.2 | @uppy/onedrive | 3.0.1 | | @uppy/audio | 1.0.2 | @uppy/progress-bar | 3.0.1 | | @uppy/aws-s3 | 3.0.2 | @uppy/provider-views | 3.0.1 | | @uppy/aws-s3-multipart | 3.0.2 | @uppy/react | 3.0.2 | | @uppy/box | 2.0.1 | @uppy/redux-dev-tools | 3.0.1 | | @uppy/companion | 4.0.2 | @uppy/remote-sources | 1.0.2 | | @uppy/companion-client | 3.0.2 | @uppy/screen-capture | 3.0.1 | | @uppy/compressor | 1.0.1 | @uppy/status-bar | 3.0.1 | | @uppy/core | 3.0.2 | @uppy/store-default | 3.0.2 | | @uppy/dashboard | 3.1.0 | @uppy/store-redux | 3.0.2 | | @uppy/drag-drop | 3.0.1 | @uppy/svelte | 3.0.1 | | @uppy/drop-target | 2.0.1 | @uppy/thumbnail-generator | 3.0.2 | | @uppy/dropbox | 3.0.1 | @uppy/transloadit | 3.0.2 | | @uppy/facebook | 3.0.1 | @uppy/tus | 3.0.2 | | @uppy/file-input | 3.0.1 | @uppy/unsplash | 3.0.1 | | @uppy/form | 3.0.1 | @uppy/url | 3.0.1 | | @uppy/golden-retriever | 3.0.1 | @uppy/utils | 5.0.2 | | @uppy/google-drive | 3.0.1 | @uppy/vue | 1.0.1 | | @uppy/image-editor | 2.0.1 | @uppy/webcam | 3.2.0 | | @uppy/informer | 3.0.1 | @uppy/xhr-upload | 3.0.2 | | @uppy/instagram | 3.0.1 | @uppy/zoom | 2.0.1 | | @uppy/locales | 3.0.1 | uppy | 3.1.0 |
disc.html page (Antoine du Hamel / #4119)Restrictor counts ghost files against maxNumberOfFiles (Andrew McIntee / #4078)Core export to warn users about the renaming (Antoine du Hamel / #4085)Uppy.Core (Antoine du Hamel / #4082)e2e.yml (Antoine du Hamel)Known issues section on Migration Guide (Antoine du Hamel / #4066)metaFields option (Antoine du Hamel / #4073)FAQs
Uppy plugin that generates small previews of images to show on your upload UI.
The npm package @uppy/thumbnail-generator receives a total of 74,412 weekly downloads. As such, @uppy/thumbnail-generator popularity was classified as popular.
We found that @uppy/thumbnail-generator demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.